<template>
  <div class="app-container" v-loading="loading">
    <el-tabs v-model="type" @tab-click="getInfo">
      <el-tab-pane v-for="(i, k) in tabList" :key="k" :label="i.label" :name="i.value" />
    </el-tabs>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item v-if="type == 2" label="公司账户" prop="companyAccountNumber">
        <el-input v-model="form.companyAccountNumber" placeholder="请输入公司账户" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="联系人" prop="contactUser">
        <el-input v-model="form.contactUser" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhone">
        <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="固定电话" prop="fixedPhone" v-if="type == '1'">
        <el-input v-model="form.fixedPhone" placeholder="请输入固定电话" />
      </el-form-item>
      <el-form-item label="联系Email" prop="contactEmail" v-if="type == '1'">
        <el-input v-model="form.contactEmail" placeholder="请输入Email" />
      </el-form-item>
      <el-form-item label="公司简介" prop="introduce" v-if="type == '1'">
        <Editors v-model="form.introduce" :min-height="192" />
      </el-form-item>
      <el-form-item label="二维码" prop="qrCode" v-if="type == '1'">
        <Image-upload v-model="form.qrCode" :limit="1" :isShowTip="false" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getInformation, updateInformation } from "@/api/system/information";

export default {
  name: "Information",
  data() {
    return {
      loading: false, // 遮罩层
      type: 'COMPANY_INFORMATION', // 类型
      tabList: [
        { label: "联系我们", value: 'COMPANY_INFORMATION' },
        { label: "合同管理公司信息", value: 'CONTRACT_COMPANY_INFORMATION' },
      ],
      form: {}, // 表单参数
      rules: {
        // 表单校验
        companyAccountNumber: [
          { required: true, message: "公司账户不能为空", trigger: "blur" },
        ],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        contactPhone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }],
        fixedPhone: [{ required: true, message: "固定电话不能为空", trigger: "blur" }],
        contactEmail: [{ required: true, message: "联系Email不能为空", trigger: "blur" }],
        qrCode: [{ required: true, message: "二维码不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getInfo();
    console.log(this.form);
  },
  methods: {
    /** 查询公司信息列表 */
    getInfo() {
      this.loading = true;
      getInformation(this.type)
        .then((res) => {
          this.form = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateInformation(this.form).then((res) => {
            this.$modal.msgSuccess("修改成功");
            this.getInfo();
          });
        }
      });
    },
  },
};
</script>
